<template>
  <div class="login">
    <Logo />
    <a-icon type="star" theme="filled" />
    <a href="javascript:void(0);" @click="question">调查问卷</a>
    <div class="login-content">
    <div class="barner">
      <a-carousel autoplay fade>
        <div><h3>启蒙开智，润泽一生</h3></div>
        <div><h3>传道，授业，解惑</h3></div>
        <div><h3>不积跬步，无以至千里</h3></div>
        <div><h3>不积小流，无以成江海</h3></div>
      </a-carousel>
    </div>
    <div class="login-forms">
      <LoginForm />
      <MobileForm />
      <QrCodeForm />
      <RegisterForm />
      <ForgetPasswordForm />
    </div>
    
    </div>
    <RxLinks />
    <Footer />
  </div>
</template>

<script lang="ts">

import Footer from "@/components/Footer.vue";
import Logo from "@/components/Logo.vue";
import RxLinks from "@/components/RxLinks.vue";
import LoginForm from "./LoginForm.vue";
import MobileForm from "./MobileForm.vue";
import QrCodeForm from "./QrCodeForm.vue";
import RegisterForm from "./RegisterForm.vue";
import ForgetPasswordForm from "./ForgetPasswordForm.vue";
import {Icon } from 'ant-design-vue';
import { defineComponent,ref, reactive ,watchEffect,watch,getCurrentInstance} from "vue";

export default defineComponent({
components: {
    Footer,
    Logo,
    LoginForm,
    MobileForm,
    QrCodeForm,
    RegisterForm,
    ForgetPasswordForm,
    Icon,
    RxLinks,
},
setup: (props, context) => {
    console.log("homeview")

    const internalInstance = getCurrentInstance()
    if (!!internalInstance){
       console.log("全局变量" + internalInstance.appContext.config.globalProperties.$http);
    }

    const question =() => {
      console.log("question");
      // window.location.href ='https://www.baidu.com'
       window.open("/question", '_blank')
    }
 
 
    
    var defaultData = reactive({
      question,
    });
    console.log(defaultData);
    return defaultData;
}
})
</script>

<style scoped>

.login{
  height:100%
}
.login-content{
  min-height: 70%;
  max-height: 600px;
  width: 100%;
  background-color: #1da31d;
}
.login-forms{
  height: 100%;
  width: 40%;
  float: left;
  /* background-color: #3a8cf7; */
}
.barner{
  height: 100%;
  width: 50%;
  padding-left: 10%;
  float: left;
}
a-carousel{
  height:100%
}

.barner div{
  height:100%
}

.ant-carousel >>> div{
  height:100%;
}
.ant-carousel >>> .slick-slide {
  height: 100%; 
  text-align: center;
  min-height: 100%;
  line-height: 65vh;
  /* background: #364d79; */
  background:#1da31d;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
  font-size: 400%;
  font-weight: bold;
  height:100%
}
</style>